<template>
    <div>
        <!-- 自动查询全部的表格 -->
        <!-- scope.row.class_id -->
         <!-- <el-table :data="classlist" stripe style="width: 100%" height="580">
            <el-table-column prop="class_name" label="大类" width="180"> </el-table-column>

            <el-table-column prop="class" label="点击" width="180">
                <template slot-scope="scope">
                    <el-button icon="el-icon-search" type="text" @click="allcx(scope.row.class_id)"
                        ><i class="el-icon-edit">查找二级</i></el-button
                    >
                </template>
            </el-table-column>
        </el-table> -->

        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
        </el-radio-group>
        <todo-item  v-for="clist in classlist" v-bind:todo="clist" v-bind:key="clist.index" >
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" >
            <el-submenu index="1"> 
                <template slot="title" >
                    <i class="el-icon-menu"></i>
                    <span slot="title"  >{{clist.class_name}}</span> 
                </template>
                <el-menu-item-group>
                    <el-menu-item index="1-1">{{clist.class_name}}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
        </todo-item>
    </div>
</template>

<script>
export default {
    methods: {
        allcx: function(class_id) {
            console.log('aaaaaaaaaaaa');
            var that = this;
            var categoryId = class_id;
            console.log(categoryId);
            console.log('iiiiiiiiiiiiiiiiii');
            this.axios({
                method: 'post',
                url: 'http://localhost:8080/s/selectLittleClass',
                //修改了提交的数据类型为json格式
                headers: { 'Content-Type': 'application/json;charset=utf-8' },
                data: JSON.stringify({
                    categoryId
                })
            })
                .then(res => {
                    console.log(res.data);

                    that.littleClass = res.data;
                })
                .catch(error => {
                    console.log(error);
                });
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    },
    data() {
        return {
            classlist: [],
            littleClass: [],
            isCollapse: true
        };
    },
    created() {
        var that = this;
        console.log('aaaaaaaaaaaa');
        this.axios('http://localhost:8080/s/selectClass').then(function(res) {
            console.log('bbbbbbbbb');
            that.list = res.data;
            console.log('cccccccccccccccccc');
            console.log(that.list);
            console.log('ddddddddddddddd');
            that.classlist = that.list;
            console.log('eeeeeeeeeeeeeeee');
        });
    }
};
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
</style>
